<!DOCTYPE html>
<html>
    <body>
        <h2 style="font-family:arial">The Umka playground</h2>
        <a href="https://github.com/vtereshkov/umka-lang" style="text-decoration: none; font-family:arial">Umka on GitHub</a>
        <br><br>
        <button id="runButton">Run</button>
        <br><br>
        <textarea id="sourceTextArea" rows="20" style="width:100%; resize:vertical; background-color:LightYellow"></textarea>
        <br><br>
        <textarea id="outputTextArea" rows="10" style="width:100%; resize:vertical; background-color:WhiteSmoke" readonly></textarea>

        <script>
            const tabWidth = 4

            var runButton = document.getElementById("runButton")
            var sourceTextArea = document.getElementById("sourceTextArea")
            var outputTextArea = document.getElementById("outputTextArea")

            sourceTextArea.value = 

`fn main() {
    printf("Hello, World!\\n")
}`
            
            sourceTextArea.onkeydown = onKey  
            runButton.onclick = onRun

            var Module = {'print': onPrint, 'printErr': onPrintErr}            

            function onKey(e) 
            {
                var start = this.selectionStart
                var end = this.selectionEnd                

                if (e.key == 'Tab') 
                {
                    e.preventDefault()
                    this.value = this.value.substring(0, start) + ' '.repeat(tabWidth) + this.value.substring(end)
                    this.selectionStart = this.selectionEnd = start + tabWidth
                }
                else if (e.key == 'Enter')
                {
                    e.preventDefault()
                    var indent = getLineIndent(start)              
                    this.value = this.value.substring(0, start) + '\n' + ' '.repeat(indent) + this.value.substring(end)
                    this.selectionStart = this.selectionEnd = start + 1 + indent
                }
                else if (e.key == '(')
                {
                    e.preventDefault()
                    this.value = this.value.substring(0, start) + '()' + this.value.substring(end)
                    this.selectionStart = this.selectionEnd = start + 1                    
                }
                else if (e.key == '[')
                {
                    e.preventDefault()
                    this.value = this.value.substring(0, start) + '[]' + this.value.substring(end)
                    this.selectionStart = this.selectionEnd = start + 1                    
                }
                else if (e.key == '{')
                {
                    e.preventDefault()
                    this.value = this.value.substring(0, start) + '{}' + this.value.substring(end)
                    this.selectionStart = this.selectionEnd = start + 1                    
                }
                else if (e.key == '"')
                {
                    e.preventDefault()
                    this.value = this.value.substring(0, start) + '""' + this.value.substring(end)
                    this.selectionStart = this.selectionEnd = start + 1                    
                }
                else if (e.key == "'")
                {
                    e.preventDefault()
                    this.value = this.value.substring(0, start) + "''" + this.value.substring(end)
                    this.selectionStart = this.selectionEnd = start + 1                    
                }
            }

            function onPrint(text)
            {
                outputTextArea.value += text + '\n'
            }

            function onPrintErr(text)
            {
                onPrint(text)
                
                var words = text.split(' ')
                if (words[0] != "Error" || typeof(words[2]) == "undefined")
                    return

                var lineNum = words[2].replace(',', '').replace('(', '')
                selectLine(lineNum)
            }            

            function onRun()
            {
                runPlayground = Module.cwrap('runPlayground', 'number', ['string', 'string'])
                source = sourceTextArea.value
                outputTextArea.value = ""
                runPlayground("playground.um", source)
            }

            function selectLine(lineNum) 
            {
                lineNum--
                var lines = sourceTextArea.value.split("\n")

                var startPos = 0, endPos = sourceTextArea.value.length
                for (var i = 0; i < lines.length; i++) 
                {
                    if (i == lineNum)
                        break;
                    startPos += lines[i].length + 1
                }

                var endPos = lines[lineNum].length + startPos

                if (typeof(sourceTextArea.selectionStart) != "undefined") 
                {
                    sourceTextArea.focus()
                    sourceTextArea.selectionStart = startPos
                    sourceTextArea.selectionEnd = endPos
                    return true
                }

                return false
            }

            function getLineIndent(curPos)
            {
                var lineStart = sourceTextArea.value.substring(0, curPos).lastIndexOf('\n') + 1
                var indent = 0

                for (var i = lineStart; i < curPos; i++)
                {
                    if (sourceTextArea.value[i] == ' ')
                        indent++
                    else if (sourceTextArea.value[i] == '\t')
                        indent += tabWidth
                    else 
                        break
                }

                return indent
            }          
        </script>

        <script src="playground/umka.js"></script>
    </body>
</html>